<template>
    <div class="Home-content">
        
          <div class="Goods-nav">
            <ul>
                <li v-for="(v,index) in list" :key="index" @click="changed(index)">
                    <img class="Goods-img" :src="v.src" alt="">
                    <p class="Goods-name">{{v.name}}</p>
                </li>
            </ul>
          </div>

         <div class="top-selling">
            <div class="top-selling-recommend">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>
                        <img src="https://hshop.honorfile.com//uomcdn/CN/eoms/202211/29CACE8BB008B23AF9855C0B23181888.png" alt="">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="https://hshop.honorfile.com//uomcdn/CN/eoms/202211/70841CC08446714C5EB72BB83817EA14.jpg" alt="">
                    </van-swipe-item>
                    
                  </van-swipe>
             </div> 

             <div class="recommend-item" v-for="(v,index) in selllist" :key="index">
                 <p class="name">{{v.name}}</p>
                 <p class="sell">{{v.sell}}</p>
                 <p class="price">{{v.price}}</p>
                 <img :src="v.src" alt="">
             </div>
         </div>

         <div class="discount-product">
            <p class="header">
                <span>优惠商品</span>
                <a href="" @click.prevent="more()">查看更多></a>
            </p>
            <div class="list">
                <div class="list-product" v-for="(v,index) in discountlist" :key="index">
                    <img :src="v.src" alt="">
                    <div class="detail">
                        <p><span>{{v.sell}}</span>{{v.name}}</p>
                    <p class="youhui">{{v.produce}}</p>
                    <div class="buy-btn">
                        <p class="price">{{v.price}}</p>
                        <div class="nowbuy">立即购买</div>
                    </div>
                    </div>
                </div>
            </div>
         </div>

         <div class="waterfall-recommend">
            <p class="waterfall-recommend-header">
                猜你喜欢
            </p>
            <div class="goods-list">
              <div class="waterfall-goods" v-for="(v,index) in waterfalllist" :key="index">
                <div class="img-box">
                  <img :src="v.src" alt="">
                </div>
                <div class="prd-name">
                <p v-show="v.new != ''">{{v.new}}</p>
                {{v.name}}
                </div>
                <div class="sub-name">
                  <p>{{v.produce}}</p>
                </div>
                <div class="price-name">
                  <p>{{v.price}}</p>
                  <sub><s>{{v.oldprice}}</s></sub>
                </div>
                <div class="labels">
                  <div v-show="v.send != '' ">{{v.send}}</div>
                  <div>{{v.sell}}</div>
                </div>

            </div>
            </div>
         </div>
    </div>
</template>

<script> 
//     import Vue from 'vue';
// import { Swipe, SwipeItem } from 'vant';

// Vue.use(Swipe);
// Vue.use(SwipeItem);

export default {
    data(){
        return{
            list:[],
            selllist:[],
            discountlist:[],
            waterfalllist:[]
        }
    },
    methods:{
       more(){
        this.$router.push("/seemore")
      },
      changed(index){
        switch(index){
          case 0:
            this.$router.push('/phone')
            break;
          case 4:
            this.$router.push('/ears')
            break
          case 10:
          this.$router.push('/smartscreen')
        }

      },
       more(){
        this.$router.push("/seemore")

        // console.log(123)

      }
    },
    beforeCreate(){
        this.$http({
            url:" http://localhost:3000/Home-Goods-Nav",
            method:"GET"
        }).then((res)=>{
            this.list=res.data;
            // console.log(this.list.src)
        }),

        this.$http({
            url:" http://localhost:3000/recommend-item",
            method:"GET"
        }).then((res)=>{
            this.selllist=res.data;
        }),

        this.$http({
            url:"http://localhost:3000/discount-product",
            method:"GET"
        }).then((res)=>{
            this.discountlist = res.data;
        }),

        this.$http({
            url:"http://localhost:3000/waterfall-goods",
            method:"GET"
        }).then((res)=>{
            this.waterfalllist = res.data;
        })
    },

}
</script>

<style scoped>
    .Home-content{
        /* background: -webkit-linear-gradient(top,#f85823,#fff); */
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;     
        background-color: #eeeeee;
        justify-content: space-between;
        overflow: auto;
        margin-bottom: 3.125rem;
    }
    .Goods-nav{
        width: 20.5862rem;
        height: 11.5881rem;
        margin: .725rem auto;
        background-color: #fff;
        border-radius: .5125rem;
        overflow: hidden;
        z-index: 20;
    }
    ul{
        width: 100%;
        height: 10.6775rem;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        flex-direction: column;
        margin: auto ;
        justify-content: space-around;
    }
    ul::-webkit-scrollbar{
        display: none;
    }
    li{
        width: 4.1125rem;
        height: 40%;
        padding: .3125rem 0 ;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .Goods-img{
        width: 2.8644rem;
        height: 2.8644rem;
        vertical-align: top;
        margin: auto;
    }
    .Goods-name{
        font-size: .5rem;
    }
    .Home-content .top-selling{
        width: 20.5862rem;
        height: 21.0925rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom:.725rem ;
    }
    .top-selling-recommend{
        width: 9.825rem;
        border-radius: 1.125rem;
        /* background-color: red; */
        
    }
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 13.5625rem;
    text-align: center;
    background-color: #39a9ed;
    width: 10rem;
    height: 13.5625rem;
    border-radius: 1.125rem;
  }
  .my-swipe .van-swipe-item img{
    width: 100%;
    height: 100%;
    border-radius: 1.125rem;
  }
  .top-selling{
    width: 20.5862rem;
    margin: auto;
  }
  .recommend-item{
    width: 10.0256rem;
    height: 6.51rem;
    background-color: rgb(165, 212, 243);
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: .625rem;
  }
  .name {
    font-size: .6rem;
    line-height: .8rem;
    font-weight: 700;
    margin-top: .6125rem;
  }
  .sell{
    font-size: .5rem;
    line-height: .7rem;
    margin-top: .15rem;
    color: #007aff;
    margin-top: .6125rem;
  }
  .price{
    font-size: .4rem;
    line-height: .8rem;
    font-weight: 700;
    margin-top: .6125rem;
  }
  .recommend-item img{
    width: 3.625rem;
    height: 3.625rem;
    position: absolute;
    bottom: 0;
    right: .6rem;
  }
  .discount-product{
    width: 20.5862rem;
    height: 23.6962rem;
   display: flex;
   flex-direction: column;
   align-items: center;
  }
  .discount-product .header{
    width: 20.5862rem;
    height: 3.125rem;
    /* background-color: red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .625rem;
    padding: .6506rem 0;
  }
  .discount-product .header span{
    font-size: 1.1rem;
    color: #1a1a1a;
    line-height: 1.4rem;
    font-weight: 700;
  }
  .discount-product .header a{
    text-decoration: none;
    font-size: .5rem;
    color: grey;
  }
  .list{
    width: 20.5862rem;
    height: 28.5712rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .list-product{
    display: flex;
    width: 100%;
    height: 6.51rem;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: .6375rem;
    padding: 1.1719rem 1.0413rem;
    box-sizing: border-box;
    margin-top: .2125rem;
  }
  .list-product img{
    width: 4.1662rem;
    height: 4.1662rem;

  }
  .detail{
    display: flex;
    flex-direction: column;
    width: 13.2956rem;
    height: 4.1662rem;
    justify-content: space-between;
  }
  .detail p{
    font-size: .6rem;
    color: #000;
    font-weight: 700;
    margin: 0;
  }
  .detail p span{
    border: 1px solid rgb(68, 68, 240);
    color: rgb(68, 68, 240);
    font-size: .4rem;
    font-weight: 400;
  }
  .detail .youhui{
    color: grey;
    font-size: .3rem;
  }
  .detail .buy-btn{
    display: flex;
    align-items: center;
  }
  .detail .buy-btn p{
    background: url(https://hshopb.honorfile.com/nwap/221030101/staticm/img/index_button.d089a06.png) no-repeat;
    width: 3.8406rem;
    height: 1.1531rem;
    text-align: center;
    line-height: 1.1531rem;
    font-size: .8rem;
    color: #fff;
  }
  .detail .buy-btn .nowbuy{
    background-color: rgb(255, 176, 176);
    color: #fa2a2d;
    width: 3.7806rem;
    height: 1.0413rem;
    font-size: .4rem;
  }
   .waterfall-recommend{
    width: 20.5862rem;
    flex: 1;
    margin-top: .725rem;
  }
  .waterfall-recommend p{
    margin: 0;
    padding: 0;
  }
  .waterfall-recommend .waterfall-recommend-header{
    font-size: 1.1rem;
    font-weight: 700;
    display: inline-block;
    margin: 1rem 0 ;
  }
  .waterfall-goods{
    display: flex;
    flex-direction: column;
    width: 48%;
    /* width: 16.0131rem; */
    background-color: #fff;
    padding: 0 .5208rem .5208rem;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-radius: .5125rem;
    margin: .1125rem;
  }
  
  .waterfall-goods .img-box{
    width: 8.985rem;
    height: 10.0256rem;
    display: flex;
  }
  .waterfall-goods .img-box img{
    width: 6.25rem;
    height: 6.25rem;
    margin: auto;
  }
  .waterfall-goods .prd-name{
    width: 8.985rem;
    height: .9rem;
    line-height: .1rem;
    font-size: .65rem;
    font-weight: 700;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-box-clamp:2;
    word-break: break-all;
    word-wrap: break-word;
  }
  .waterfall-goods .prd-name p{
    display: inline-block;
    font-size: .4rem;
    background-color: #256EEE;
    color: #fff;
    border-radius: .2125rem;
    width: 1.7594rem;
    height: .7813rem;
    line-height: .7813rem;
    text-align: center;
  }
  .sub-name{
    width: 8.985rem;
    height: 1.0413rem;
    font-size: .7813rem;
    color: grey;
  }
  .waterfall-goods .price-name{
    width: 5.7594rem;
    height: 1rem;
    font-size: 0.7rem;line-height: 1rem;
    font-weight: 700;
    color: #000;
    display: flex;
    align-items: left;
    /* align-self: left; */
    align-self: start;
    
  }
 .price-name sub{
  color: grey;
 }
  .labels{
    display: flex;
    font-size: .75rem;
    width: 100%;
    /* justify-content: space-around; */
  }
  .labels div:nth-child(1){
    margin-right: .3125rem;
  }
  .labels div:nth-child(1),.labels div:nth-child(2){
    height: .8812rem;
    color: #256FFF;
    border: 1px solid #256FFF;
    text-align: center;
    line-height: .8812rem;
  }
  .goods-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
 </style>